<html>
    <head>
        <style type="text/css">
        .text{
            position: relative; /* 使用::after */
            font-size: 20px;
            transition:1s; /* 过渡时间 */
            padding-bottom: 8px;  /* 文字与下划线的间隔 */
        }

        .text::after{
            content:"";
            width: 0;
            height: 2px;
            background: blue;
            position: absolute;
            top: 100%;
            left: 50%;
            transition: all 1s;
        }

        .blue{
            color:blue;
        }

        .blue:after{
        left: 0%;
        width: 100%;
        }
        </style>

    </head>
    <body>
        <span id="variable" class="text">前端学院</span><br /><br />
        <div id="underline"></div> 
        <button type="button" id="btn" >切换样式</button>
        <script>
            var x = document.getElementById('variable');
            var btn = document.getElementById('btn');
            btn.addEventListener("click",function(){
                x.classList.toggle("blue"); /* 添加的是class */
            }, false)
        </script>
    </body>
</html>